<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>key的管理</h1>
    <button v-on:click="show = !show">btn</button>
    <div v-if="show">
      <h2>登录页面</h2>
      <input type="text" placeholder="请输入用户名" key="denglu">
    </div>
    <div v-else>
      <h2>注册页面</h2>
      <input type="text" placeholder="请输入注册名" key="zhuce">
    </div>

    <hr>

    <ul>
      <!-- 尤其是当使用v-for的时候，无脑地给每一个元素加上key属性 -->
      <!-- 每一个元素的key需要保持唯一性 -->
      <!-- 还要保证每个元素更新前后的key是一样的，所以不推荐使用index作为key -->
      <!-- 不能以复杂数据类型作为key的值，只能用数字或者字符串 -->
      <!-- 最最推荐的是使用数据库的主键 -->
      <li v-for="(item) in arr" :key="item.id">
        {{ item.name }} - {{ item.id }} - 
        <button v-on:click="remove(item.id)">删除</button>
      </li>
    </ul>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;
    

    createApp({
      data() {
        return {
          show: true,
          list: [1,2,3,3,3,4,5,5,5],
          arr: [
            {
              id: 1,
              name: "zhangsan"
            },
            {
              id: 2,
              name: "lisi"
            },
            {
              id: 3,
              name: "wangwu"
            },
            {
              id: 4,
              name: "zhaoliu"
            }
          ]
        }
      },
      methods: {
        remove(id) {
          this.arr = this.arr.filter(item => {
            return item.id !== id
          })
        }
      }
    }).mount("#app")

  </script>
</body>
</html>